<template>
    <!-- 新增/编辑弹框 -->
    <systemDialog :title="dailog.title" :visible="dailog.visible" :height="dailog.height" :width="dailog.width"
        @onClose="onClose" @onConfirm="confirm"
    >
        <template v-slot:content>
            <el-form :model="formData" ref="formDataRef" :rules="rules" label-width="80px" size="small">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="所属部门" prop="deptName">
                            <el-input v-model="formData.deptName" @click="selectParent"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="姓名" prop="loginName">
                            <el-input v-model="formData.loginName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="电话" prop="mobile">
                            <el-input v-model="formData.mobile"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="昵称">
                            <el-input v-model="formData.nickName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="邮箱">
                            <el-input v-model="formData.email"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="登录名" prop="username">
                            <el-input v-model="formData.username"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col v-if="formData.type === '0'" :span="12">
                        <el-form-item label="密码" prop="password">
                            <el-input v-model="formData.password"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="性别" prop="sex">
                            <el-radio-group v-model="formData.sex">
                                <el-radio :label="'0'">男</el-radio>
                                <el-radio :label="'1'">女</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </template>
    </systemDialog>

    <!-- 上级部门弹框 -->
    <parent ref="parentRef" @select="select"></parent>
</template>
<script setup lang='ts'>
import { ref,reactive} from 'vue'
import systemDialog from '@/components/systemDialog.vue';
import userDialog from '@/hooks/userDialog';
import addAndEdit from '@/composables/user/addAndEdit'
import formDataDialog from '@/composables/user/formData'
import parent from '../department/parent.vue';
import userSelectParent from '@/composables/department/userSelectParent';

// 新增/编辑弹窗基础属性
const { formData,rules } = formDataDialog()

// 弹框属性
const { dailog,onShow,onClose } = userDialog()

// 声明事件
const emit = defineEmits(['save'])

// 新增/编辑弹框方法
const { confirm, show, formDataRef, select} = addAndEdit(dailog,onShow,onClose,formData, emit)

// 选择上级部门属性和方法
// 点击触发<el-input v-model="formData.deptName" @click="selectParent"></el-input>，设置dailog属性
const { parentRef, selectParent } = userSelectParent()

// 暴露方法给外部使用
// curd.ts里的 const addRef = ref<{ show:(type:string,row?:AddUserModel) => void }>()
defineExpose({
    show
})
</script>
<style scoped lang='scss'>
</style>